<template>
  <el-dialog
    v-model="showDialog"
    title="选择商品"
    width="42%"
    @close="emit('hide')"
  >
    <!-- <span>This is a message</span> -->
    <div class="searchBox">
      <el-input
        v-model="queryParams.keyword"
        placeholder="商品名称搜索"
        @keydown.enter="pageSizeChangeHandle"
      /><el-button color="#f5f7fa" text @click="pageSizeChangeHandle"
        ><el-icon> <Search /> </el-icon
      ></el-button>
    </div>
    <el-table
      :data="list"
      border
      style="width: 100%"
      @select-all="checkAllFn"
      @select="checkFn"
      ><el-table-column type="selection" width="55" /><el-table-column
        prop="name"
        label="商品名称"
      /><el-table-column prop="name" label="货号">
        <template #default="{ row }">
          {{ "NO. " + row.brandId }}
        </template></el-table-column
      ><el-table-column prop="price" label="价格">
        <template #default="{ row }">
          {{ "¥ " + row.price }}
        </template></el-table-column
      >
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="pageSizeChangeHandle"
        v-model:current-page="queryParams.pageNum"
      />
    </div>
    <template #footer
      ><span class="dialog-footer">
        <el-button @click="emit('hide')">取消</el-button>
        <el-button type="primary" @click="submit"> 确定 </el-button></span
      >
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, defineProps, watch, defineEmits } from "vue";
import { Search } from "@element-plus/icons-vue";
import useTable from "@/hooks/useTable";
import { getFlashGoodsListApi, flashProductRelationCreateApi } from "../api";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute } from "vue-router";

const route = useRoute();
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["hide", "getList"]);

const showDialog = ref<boolean>(false);

watch(
  () => props.show,
  () => {
    showDialog.value = props.show;
  }
);

const queryParams = reactive<IGetGoodsListParams>({
  keyword: "",
  pageNum: 1,
  pageSize: 5,
});

const { list, pageSizeChangeHandle, total } = useTable(
  getFlashGoodsListApi,
  queryParams
);

const paramsList = ref<IFlashProductRelationCreate[]>();

const checkAllFn = (selection: IGoodsList[]) => {
  // console.log(selection);
  paramsList.value = selection.map((item) => ({
    flashPromotionId: route.query.flashPromotionId as string,
    flashPromotionSessionId: route.query.flashPromotionSessionId as string,
    productId: item.id,
  }));
};
const checkFn = (selection: IGoodsList[]) => {
  paramsList.value = selection.map((item) => ({
    flashPromotionId: route.query.flashPromotionId as string,
    flashPromotionSessionId: route.query.flashPromotionSessionId as string,
    productId: item.id,
  }));
};

// 提交
const submit = () => {
  ElMessageBox.confirm("是否确认提交", "提示", {
    cancelButtonText: "取消",
    confirmButtonText: "确认",
    type: "warning",
  }).then(() => {
    flashProductRelationCreateApi(
      paramsList.value as IFlashProductRelationCreate[]
    ).then((res) => {
      if (res.code === 200) {
        // 提示
        ElMessage.success("添加成功");
        // 隐藏模态框
        emit("hide");
        // 更新列表
        emit("getList");
        // 清空数组
        paramsList.value = [];
      }
    });
  });
};
</script>

<style scoped lang="less">
.searchBox {
  display: flex;
  width: 300px;
  margin-bottom: 20px;

  :deep(.el-input__wrapper) {
    border-radius: 4px 0 0 4px;
  }

  :deep(.el-button) {
    // box-shadow: 0 0 0 1px #909399;
    border: 1px solid #dcdfe6;
    border-radius: 0 4px 4px 0;
    box-sizing: border-box;
    border-left: none;
  }
}

:deep(.el-table-column--selection) {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
